<template>
  <div class="comput-result">
    <div class="result-box">
      <div class="tabs-box" v-show="showTabs">
        <div class="tabs-title">
          <span>控制断面名称</span>
        </div>
        <div class="tabs-list">
          <div
            :class="['list-item', currentIndex == index ? 'active' : '']"
            v-for="(item, index) in sectionArr"
            :key="index"
            @click="handleClickTabs(item, index)"
          >
            <el-tooltip :content="item.blknm" placement="top" :disabled="item.blknm.length < 6">
              <span>{{ item.blknm }}</span>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="box-right">
        <div class="comput-times">
          <div class="times-title">
            <span>模型精度评定</span>
          </div>
        </div>
        <div class="table-box">
          <!-- typeId==3为规程调度 -->
          <el-table
            v-if="props.modelObj?.typeId != 3"
            border
            :data="state.tableData"
            height="100%"
            :span-method="objectSpanMethod"
          >
            <el-table-column prop="blknm" label="预报断面" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="fcProj" label="预报项目" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="预报方案精度" align="center">
              <el-table-column prop="ccNum" label="总场次" align="center"> </el-table-column>
              <el-table-column prop="qualNum" label="合格场次" align="center"> </el-table-column>
              <el-table-column prop="rate" label="合格率(%)" align="center"> </el-table-column>
              <el-table-column prop="grade" label="等级" align="center"> </el-table-column>
            </el-table-column>
          </el-table>
          <el-table v-else border size="small" :data="timeTableData" style="width: 100%">
            <el-table-column label="预报断面" prop="blknm" align="center" />
            <el-table-column label="计算总场次" prop="ccTotal" align="center" />
            <el-table-column label="合格场次" prop="ccPass" align="center" />
            <el-table-column label="评定等级" prop="level" align="center" />
          </el-table>
        </div>
        <!-- <div class="comput-times">
          <div class="times-title">
            <span>模型时效评定</span>
          </div>
        </div>
        <div class="table-time">
          <el-table border :data="timeTableData" style="width: 100%">
            <el-table-column label="预报断面" prop="blknm" align="center" />
            <el-table-column label="总场次" prop="ccTotal" align="center" />
            <el-table-column label="成功场次" prop="ccPass" align="center" />
            <el-table-column label="最大耗时" prop="maxTake" align="center" />
            <el-table-column label="最小耗时" prop="minTake" align="center" />
            <el-table-column label="平均耗时" prop="avgTake" align="center" />
            <el-table-column label="评定等级" prop="level" align="center" />
          </el-table>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted, watch, ref } from 'vue'
import sectionArr from '@/assets/data/com_data/sec_info.json'
import eva_result from '@/assets/data/com_data/eva_result.json'
import {
  // 查询新安江时效评定结果
  getXajdurEvaResult,
  // 查询精度评定结果
  getXajaccEvaResult,
  // 时空变源评定结果
  getSkbyAccEvaResult,
  getSkbyDurEvaResult
} from '@/services/modules/model-verify'

const currentIndex = ref(0)
const state = reactive({
  tableData: []
})
const timeTableData = ref([])
const props = defineProps({
  showTabs: {
    type: Boolean,
    default: true
  },
  tabsId: {
    type: String,
    default: ''
  },
  scid: {
    type: Number,
    default: 0
  },
  modelObj: {
    type: Object,
    default: () => {}
  },
  blkcd: {
    type: String,
    default: ''
  }
})
watch(
  // 当方案变化时 触动
  () => props.scid,
  () => {
    // let arr = eva_result.evaAccuracy.filter((e) => {
    //   return e.blkcd == props.tabsId
    // })
    // state.tableData = arr
    handleClickTabs(sectionArr[0], 0)
  }
)
watch(
  // 当左侧断面变化时 触动
  () => props.blkcd,
  () => {
    handleClickTabs(sectionArr[0], 0)
  }
)
onMounted(() => {
  // handleClickTabs(sectionArr[0], 0)
})

function handleClickTabs(item, index) {
  currentIndex.value = index
  // 新安江
  if (props.modelObj.typeCode == 'W010002') {
    console.log(props.modelObj.typeId, '苦咖啡')
    // 精度
    getXajaccEvaResult({
      scid: props.scid,
      blkcd: props.blkcd
    }).then((res) => {
      if (res.code === 200) {
        console.log(res.data, 'blkcd')
        state.tableData = res.data
      }
    })
    // 时效
    getXajdurEvaResult({
      scid: props.scid,
      blkcd: props.blkcd
    }).then((res) => {
      if (res.code === 200) {
        timeTableData.value = res.data
      }
    })
  } else if (props.modelObj.typeCode == 'W010001') {
    // 时空变源精度

    getSkbyAccEvaResult({
      scid: props.scid,
      blkcd: props.blkcd
    }).then((res) => {
      if (res.code === 200) {
        console.log(res.data, 'blkcd', '时空变源')
        state.tableData = res.data
      }
    })
    // 时效
    getSkbyDurEvaResult({
      scid: props.scid,
      blkcd: props.blkcd
    }).then((res) => {
      if (res.code === 200) {
        timeTableData.value = res.data
      }
    })
  }

  // let arr = eva_result.evaAccuracy.filter((e) => {
  //   return e.blkcd == item.blkcd
  // })
  // state.tableData = arr
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 4 === 0) {
      return {
        rowspan: 4,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>
<style lang="less" scoped>
.comput-result {
  width: 100%;
  font-size: 12px;
  height: 100%;
  .result-box {
    width: 100%;
    height: 100%;
    display: flex;
    .tabs-box {
      width: 150px;
      margin-right: 15px;
      .tabs-title {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f2f2f2;
        cursor: pointer;
        span {
          font-weight: 600;
        }
      }
      .tabs-list {
        width: 100%;
        height: calc(100% - 30px);
        background: #d7d4d427;
        text-align: center;
        overflow-y: auto;
        .list-item {
          width: 100%;
          height: 25px;
          cursor: pointer;
          &.active {
            span {
              color: #0154db;
            }
          }
          span {
            width: 100%;
            color: black;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .list-item:hover {
          width: 100%;
          height: 25px;
          cursor: pointer;
          span {
            color: #0154db;
          }
        }
      }
    }
    .box-right {
      width: calc(100% - 135px);
      height: 100%;
      flex: 1;
      .comput-times {
        height: 35px;
        display: flex;
        align-items: center;
        .times-title {
          height: 20px;
          span {
            // font-weight: 600;
            font-size: 14px;
            color: #409eff;
          }
        }
      }
      .table-box {
        width: 100%;
        height: 200px;
        :deep(.el-table) {
          // font-size: 12px;
          overflow-x: auto;
          th {
            padding: 0;
          }
          td {
            padding: 0;
          }
        }
      }
      .table-time {
        width: 100%;
        height: calc(100% - 300px);
      }
    }
  }
}
</style>
